<template>
  <div class="singerBox">

    <div  v-if="songsStore.searchAlName" class="singerList" @click="getalbumdetail(songsStore.searchAlId)">
      <img :src="songsStore.searchAlPic" class="avatar">
      <div style="margin-left: 20px">
        <p style="font-size: 30px;margin-top: 5px">专辑:{{songsStore.searchAlName}}</p>
      </div>
      <el-icon style="margin-top: 40px;margin-left: 40px;font-size: 30px"><ArrowRightBold /></el-icon>
    </div>


    <div   v-if="!songsStore.searchAlName&&songsStore.avatarUrl" class="singerList" @click="gosingerDetail">
      <img :src="songsStore.avatarUrl" class="avatar">
      <div style="margin-left: 20px">
        <h1 style="margin-top: 5px;font-size: 30px">歌手:{{songsStore.singername}}</h1>
        <a style="margin-top: 5px;font-size: 20px"> 单曲:{{songsStore.playcount}}</a>
        <a style="margin-left: 20px;font-size: 20px"> 专辑:{{songsStore.alcount}}</a>
      </div>
      <el-icon style="margin-top: 40px;margin-left: 40px;font-size: 30px"><ArrowRightBold /></el-icon>
    </div>

    <div  v-if="!songsStore.searchAlName&&songsStore.firstAlUrl" class="ortherList" @click="getalbumdetail(songsStore.album[0].id)">
      <img  :src="songsStore.firstAlUrl" class="img" >
      <div style="margin-left: 20px">
        <p style="font-size: 30px;margin-top: 5px">新专辑:{{songsStore.firstAlName}}</p>
      </div>
      <el-icon style="margin-top: 40px;margin-left: 40px;font-size: 30px"><ArrowRightBold /></el-icon>
    </div>

    <div v-else style="margin-left: 100px">
      <p style="font-size: 30px">搜索:{{songsStore.searchvalue}}</p>
    </div>
  </div>


  <el-menu
      style="margin-left: 80px;margin-top: 20px;"
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      active-text-color="green"
      router
  >
    <el-menu-item index="/homePage/searchList/1" >歌曲</el-menu-item>
    <el-menu-item index="/homePage/searchList/2" >视频</el-menu-item>
    <el-menu-item index="/homePage/searchList/3" >专辑</el-menu-item>
    <el-menu-item index="/homePage/searchList/4" >歌手</el-menu-item>
  </el-menu>
  <div class="SearchListbox"><router-view :whichList="songsStore.List"></router-view></div>
</template>

<script setup>
import {usealbumDetailStore, useSongsStore} from "@/Store/Pinia/pinia"
import {useRouter} from "vue-router";
import {storeToRefs} from "pinia";
const songsStore =useSongsStore();
const albumDetail=usealbumDetailStore();
const router=useRouter();
// const{searchAlName,searchAlId,searchAlPic,avatarUrl,singername,playcount,alcount,album,firstAlUrl,firstAlName,show}=storeToRefs(songsStore);

function gosingerDetail() {
  router.push({path: "/homePage/singerDetail/5"})
}

function getalbumdetail(id){
  albumDetail.getalbumDetail(id);
  router.push({path:"/homePage/AlbumDetail/1"})
}

</script>

<style scoped>
.SearchListbox{
  width: 100%;
  height: 390px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.singerBox{
  width:100%;
  height: 100px;
  margin-top: 80px;
  display: flex;
}

.singerBox .singerList{
  width: 500px;
  height: 100%;
  margin-left: 100px;
  display: flex;
  background-color: rgba(153, 169, 191, 0.05);
}
.singerBox .ortherList{
  width: 500px;
  height: 100%;
  margin-left: 100px;
  display: flex;
  background-color: rgba(153, 169, 191, 0.05);
}

.singerBox .ortherList .img{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.singerBox .singerList .avatar{
  width: 100px;
  height: 100px;
  border-radius: 50%;
}





</style>